<div nz-row>
  @if (!isMobile) {
    <div nz-col nzXs="24" nzSm="24" nzMd="6" nzLg="6" nzXl="5" nzXXl="4" class="main-menu">
      <nz-affix>
        <div main-menu (to)="to()" class="main-menu-inner"></div>
      </nz-affix>
    </div>
  }
  <div nz-col nzXs="24" nzSm="24" nzMd="18" nzLg="18" nzXl="19" nzXXl="20">
    <div class="main-container" [class.pages-container]="meta.isPages">
      <router-outlet />
    </div>
    @if (meta.next || meta.prev) {
      <div class="prev-next-nav">
        @if (meta.prev) {
          <a class="prev-page" routerLink="{{ meta.prev.url }}">
            <nz-icon nzType="left" class="footer-nav-icon-before" />
            <span>{{ meta.prev.title }}</span>
            <span class="chinese">{{ meta.prev.subtitle }}</span>
          </a>
        }
        @if (meta.next) {
          <a class="next-page" routerLink="{{ meta.next.url }}">
            <span>{{ meta.next.title }}</span>
            <span class="chinese">{{ meta.next.subtitle }}</span>
            <nz-icon nzType="right" class="footer-nav-icon-after" />
          </a>
        }
      </div>
    }
    <app-footer small />
  </div>
</div>
@if (isMobile) {
  <div class="drawer-wrapper">
    <div class="drawer drawer-left" [class.drawer-open]="opened">
      <div class="drawer-mask" (click)="opened = !opened"></div>
      <div class="drawer-content-wrapper">
        <div class="drawer-content">
          <main-menu (to)="to()" />
        </div>
        <div class="drawer-button" (click)="opened = !opened"><nz-icon nzType="menu-unfold" /></div>
      </div>
    </div>
  </div>
}
